<script lang="ts">
export default {
  name: "XDemo2",
};
</script>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { createModal } from "@/utils/createModal";
import Text from "./text.vue";
const drawerVisible = ref(false);
const data = reactive({
  order1: "12323334",
  order2: "dddwnfnre",
});
const openDrawer = () => {
  createModal({
    title: "hellol world",
    component: Text,
    showFooter: true,
    size: "35%",
    data,
  });
};
</script>

<template>
  <el-card>
    <el-form inline>
      <el-form-item label="订单1：">
        <el-input placeholder="订单号1" v-model="data.order1" />
      </el-form-item>
      <el-form-item label="订单2：">
        <el-input placeholder="订单号2" v-model="data.order2" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="openDrawer"> 函数弹窗 </el-button>
        <el-button type="primary"> 关闭弹窗 </el-button>
        <el-button type="primary" @click="drawerVisible = true">
          打开
        </el-button>
      </el-form-item>
    </el-form>
    <Mycom />
  </el-card>
  <el-drawer v-model="drawerVisible" title="消息">
    <div>hello</div>
    <template #footer>
      <div class="dd">
        <el-button @click="drawerVisible = false"> 取消 </el-button>
        <el-button type="primary"> 确定 </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="less" scoped>
.dd {
  text-align: left;
}
</style>
